<template>
  <div class="purchase-plans">
    <a-page-header
      title="采购计划"
      sub-title="采购计划制定和管理"
    >
      <template #extra>
        <a-button type="primary">
          <PlusOutlined />
          新建计划
        </a-button>
      </template>
    </a-page-header>

    <a-card>
      <a-table
        :columns="columns"
        :data-source="plans"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 'active' ? 'green' : 'orange'">
              {{ record.status === 'active' ? '执行中' : '计划中' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'budget'">
            ¥{{ record.budget.toLocaleString() }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small">查看</a-button>
              <a-button type="link" size="small">编辑</a-button>
              <a-button type="link" size="small">执行</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

const columns = [
  { title: '计划编号', dataIndex: 'planNo', key: 'planNo' },
  { title: '计划名称', dataIndex: 'planName', key: 'planName' },
  { title: '计划周期', dataIndex: 'period', key: 'period' },
  { title: '预算金额', dataIndex: 'budget', key: 'budget' },
  { title: '负责人', dataIndex: 'manager', key: 'manager' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action', width: 200 },
]

const plans = ref([
  {
    id: 1,
    planNo: 'PC202401001',
    planName: '1月生鲜采购计划',
    period: '2024-01-01 ~ 2024-01-31',
    budget: 500000,
    manager: '张采购',
    status: 'active'
  },
  {
    id: 2,
    planNo: 'PC202401002',
    planName: '春节备货计划',
    period: '2024-01-20 ~ 2024-02-15',
    budget: 800000,
    manager: '李经理',
    status: 'planning'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
})
</script>

<style scoped>
.purchase-plans {
  padding: 24px;
}
</style>